<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <!--    <script src="js/vue.js"></script>-->
    <script src="js/vue.min.js"></script>
    <title>开始锻炼吧~！骚年！</title>
    <style>
        html {
            height: 100vh;
        }

        body {
            height: 100%;
            margin: 0;
        }

        #app {
            display: flex;
            height: 100%;
        }

        #group, #play {
            height: calc(100% - 2px);
        }

        #play {
            display: flex;
            flex-direction: column;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            border-right: 1px solid #999;
        }

        #group {
            width: 240px;
            border: 1px solid #999;
        }

        #form {
            width: 400px;
            padding: 20px 0;
            text-align: center;
            border-bottom: 1px solid #999;
        }

        #plan-execution-display-board {
            height: calc(100% - 222px);
            overflow: auto;
            resize: none;
        }

        .control-button {
            width: 150px;
        }

        .in-progress-group {
            background: aqua;
        }

        .in-progress-group-item {
            background: yellow;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="group">
        <ol>
            <li v-for="oneExerciseGroup in exerciseGroupList" :key="oneExerciseGroup.exerciseGroupName"
                v-bind:class="{'in-progress-group' : oneExerciseGroup.inProgressGroup}">
                <div>
                    {{oneExerciseGroup.exerciseGroupName}} - {{oneExerciseGroup.numberOfExerciseGroups}}组：
                    <ul>
                        <li v-bind:class="{'in-progress-group-item' : oneExerciseGroup.inProgressGroup && oneExerciseGroup.inExerciseOrRest === 'EXERCISE'}">
                            锻炼时长：{{oneExerciseGroup.exerciseTime}} 秒
                        </li>
                        <li v-bind:class="{'in-progress-group-item' : oneExerciseGroup.inProgressGroup && oneExerciseGroup.inExerciseOrRest === 'REST'}">
                            休息时长：{{oneExerciseGroup.restTime}} 秒
                        </li>
                    </ul>
                </div>
            </li>
        </ol>
    </div>
    <div id="play">
        <div id="form">
            <label for="exercise-time">锻炼组名：<input type="text" id="exercise-group-name"
                                                   v-model="exerciseGroupName"/> 火</label>
            <br/>
            <label for="exercise-time">锻炼组数：<input type="number" id="number-of-exercise-groups"
                                                   v-model="numberOfExerciseGroups"/> 火</label>
            <br/>
            <label for="exercise-time">锻炼时长：<input type="number" id="exercise-time" v-model="exerciseTime"/> 秒</label>
            <br/>
            <label for="rest-time">休息时长：<input type="number" id="rest-time" v-model="restTime"/> 秒</label>
            <br/>
            <br/>
            <button id="add-a-group" class="control-button" @click="addAGroup()">新添一组</button>
            <br/>
            <br/>
            <button id="delete-a-group" class="control-button" @click="deleteAGroup()">删除</button>
            <label for="group-index"><input type="number" id="group-index" v-model="groupIndex" min="0"
                                            max="100"/>组</label>
            <br/>
            <br/>
            <button id="start" class="control-button" @click="start()" :disabled="timer != null">开始计划</button>
            <button id="stop" class="control-button" @click="pause()" :disabled="timer == null">
                {{pauseFlag ? '继续' : '暂停'}}计划
            </button>
        </div>
        <label for="plan-execution-display-board"></label>
        <textarea id="plan-execution-display-board" ref="plan_execution_display_board" disabled>{{message}}</textarea>
    </div>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                exerciseGroupName: '',
                numberOfExerciseGroups: 10,
                exerciseTime: 35,
                restTime: 25,

                groupIndex: 0,

                message: 'Hello~!\n',

                exerciseGroupList: [{
                    exerciseGroupName: '下蹲',
                    numberOfExerciseGroups: 10,
                    exerciseTime: 35,
                    restTime: 25,
                    inProgressGroup: false,
                    inExerciseOrRest: 'EXERCISE'
                }, {
                    exerciseGroupName: '俯卧撑',
                    numberOfExerciseGroups: 10,
                    exerciseTime: 35,
                    restTime: 25,
                    inProgressGroup: false,
                    inExerciseOrRest: 'EXERCISE'
                }],

                timer: null,
                pauseFlag: false,
                progressIndex: 0
            }
        },
        methods: {
            start() {
                this.progressIndex = 0;
                this.loop();
            },
            loop() {
                if (this.progressIndex >= this.exerciseGroupList.length) {
                    alert('锻炼结束');
                    this.stop();
                    return;
                }
                let oneExerciseGroup = this.exerciseGroupList[this.progressIndex];
                let tempOneExerciseGroup = JSON.parse(JSON.stringify(oneExerciseGroup));
                oneExerciseGroup.inProgressGroup = true;
                this.releaseMessage(`======= 开始第 ${this.progressIndex + 1} 阶段的训练 =======`);
                this.releaseMessage(`======= 开始第 ${oneExerciseGroup.numberOfExerciseGroups} 组的训练`);

                this.timer = setInterval(() => {
                    if (this.pauseFlag) {
                        return;
                    }
                    if ('EXERCISE' === oneExerciseGroup.inExerciseOrRest) {
                        // 锻炼中
                        this.releaseMessage(`锻炼 --> 倒计时：${--oneExerciseGroup.exerciseTime}`);
                        if (oneExerciseGroup.exerciseTime === 0) {
                            oneExerciseGroup.inExerciseOrRest = 'REST';
                            oneExerciseGroup.exerciseTime = tempOneExerciseGroup.exerciseTime;
                        }
                    } else {
                        // 休息中
                        this.releaseMessage(`休息 --> 倒计时：${--oneExerciseGroup.restTime}`);
                        if (oneExerciseGroup.restTime === 0) {
                            oneExerciseGroup.inExerciseOrRest = 'EXERCISE';
                            oneExerciseGroup.restTime = tempOneExerciseGroup.restTime;

                            if (oneExerciseGroup.numberOfExerciseGroups === 1) {
                                // 结束一组
                                oneExerciseGroup.inProgressGroup = false;
                                oneExerciseGroup.numberOfExerciseGroups = tempOneExerciseGroup.numberOfExerciseGroups;

                                this.progressIndex++;
                                this.stop();
                                this.loop();
                            } else {
                                // 开始下一组
                                oneExerciseGroup.numberOfExerciseGroups--;
                                this.releaseMessage(`======= 开始第 ${oneExerciseGroup.numberOfExerciseGroups} 组的训练`);
                            }
                        }
                    }
                }, 1000);
            },
            stop() {
                clearInterval(this.timer);
                this.timer = null;
            },
            pause() {
                this.pauseFlag = !this.pauseFlag;
            },
            releaseMessage(message) {
                this.message += `${message}\n`;
                this.$refs.plan_execution_display_board.scrollTop = this.$refs.plan_execution_display_board.scrollHeight;
            },
            addAGroup() {
                if (!this.exerciseGroupName) {
                    alert('请输入组名！')
                    return;
                }
                this.exerciseGroupList.push({
                    exerciseGroupName: this.exerciseGroupName,
                    numberOfExerciseGroups: this.numberOfExerciseGroups,
                    exerciseTime: this.exerciseTime,
                    restTime: this.restTime,
                    inProgressGroup: false,
                    inExerciseOrRest: 'EXERCISE'
                });
                this.storage();
            },
            deleteAGroup() {
                if (this.groupIndex === 0 || this.groupIndex > this.exerciseGroupList.length) {
                    alert('删除失败，未能找到指定锻炼组！')
                    return;
                }
                this.exerciseGroupList.splice(this.groupIndex - 1, 1);
                this.storage();
            },
            storage() {
                localStorage.setItem('exerciseGroupList', JSON.stringify(this.exerciseGroupList));
            },
            read() {
                this.exerciseGroupList = JSON.parse(localStorage.getItem('exerciseGroupList'));
                if (!this.exerciseGroupList) {
                    this.exerciseGroupList = [];
                }
            }
        },
        mounted() {
            console.log('开始锻炼吧~！骚年！');
            this.read();
        }
    });
</script>
</body>
</html>
